<template>
  <el-menu
    active-text-color="#ffd04b"
    background-color="#545c64"
    class="el-menu-vertical-demo"
    :default-active="active"
    text-color="#fff"
    :collapse="isCollapse"
  >
    <el-menu-item index="1" @click="routerpush('1')">
      <el-icon><icon-menu /></el-icon>
      <span>数据展示</span>
    </el-menu-item>
    <el-menu-item index="2" @click="routerpush('2')">
      <el-icon><setting /></el-icon>
      <span>缴费管理</span>
    </el-menu-item>
    <el-sub-menu index="3">
      <template #title>
        <el-icon><location /></el-icon>
        <span>用户信息</span>
      </template>
      <el-menu-item index="1-1" @click="routerpush('1-1')"
        >住户信息列表</el-menu-item
      >
      <el-menu-item index="1-2" @click="routerpush('1-2')"
        >住户信息修改</el-menu-item
      >
    </el-sub-menu>
    <el-menu-item index="4" @click="routerpush('4')">
      <el-icon><CopyDocument /></el-icon>
      <span>展示</span>
    </el-menu-item>
  </el-menu>
</template>
<script lang="ts" setup>
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from "@element-plus/icons-vue";
import { ref } from "@vue/reactivity";
import { watch } from "@vue/runtime-core";
import { useStore } from "vuex";
import { useRoute, useRouter } from "vue-router";

//下标显示
const active = ref<string>(
  (localStorage.getItem("active") as string)
    ? (localStorage.getItem("active") as string)
    : "1"
);
//全局状态
const store = useStore();

//路由
const router = useRouter();
const route = useRoute();

const isCollapse = ref(true);

//
watch(
  () => store.state.navBool,
  (navl) => {
    isCollapse.value = navl;
  }
);

//点击跳转到相应路由
const routerpush = (id: string) => {
  switch (id) {
    case "1-1":
      router.push("/myhome/userlist");
      break;
    case "3":
      router.push("/myhome/userlist");
      break;
    case "1-2":
      router.push("/myhome/updatauser");
      break;
    case "1":
      router.push("/myhome/mydata");
      break;
    case "2":
      router.push("/myhome/myconsume");
      break;
    case "4":
      router.push("/myhome/myshowing");
      break;
    default:
      break;
  }
};
</script>
<style lang="scss">
.el-menu {
  overflow: hidden;
}
</style>